<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="title" content="墓地大全|殡仪服务|节地生态葬|地图选墓|云顶天宫-殡葬行业领军品牌公司" />
<meta name="keywords"
	content="公墓设计，陵园设计，墓地设计，墓地风水，殡仪馆设计，云顶天宫，殡葬行业设计领军品牌公司" />
<meta name="description"
	content="云顶天宫，洛阳殡葬协会设计单位，专业墓地风水策划，公墓设计、陵园设计、殡仪馆设计、室内装修、墓地设计公司，行业内顶尖的陵园设计机构，殡葬规划设计领军品牌，超过800个设计案例，高端殡葬服务策划公司。" />
<title>公墓设计|陵园设计|墓地设计|殡仪馆设计|云顶天宫-殡葬行业规划设计领军品牌公司</title>
<link rel="stylesheet" type="text/css" href="123/reset.css" />
<link rel="stylesheet" type="text/css" href="123/bzyp.css" />
<link rel="stylesheet" type="text/css" href="123/video-js.css" />
<link rel="stylesheet" type="text/css" href="123/animate.min.css" />
<link rel="stylesheet" type="text/css" href="123/lunbo.css" />
<link rel="stylesheet" href="123/ui-dialog.css">
<link rel="stylesheet" href="layui/css/layui.css">

</head>
<style>
body {
	background-image: url("images/default/heise.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
</style>
<body>
	<header class="clear">
	<div class="wrap">
		<div class="header-top">
			<div class="logo">
				<a href="ShouYe.jsp"><img src="images/default/logo.png" /></a>
			</div>
			<div class="caidan">
				<a href="javascript:void(0);"><img
					src="images/default/caidan-copy.png" /></a>
			</div>
		</div>
		<div class="header-nav">
			<ul>
				<li class="active"><a href="ShouYe.jsp">
						<p>首页</p>
						<p>HOME</p>
				</a></li>
				<li><a href="#">
						<p>园区景观</p>
						<p>Park Landscape</p>
				</a>
					<div class="header-nav2">
						<div class="wrap">
							<p>
								<a href="javascript:void(0);"> <span>园区景观</span> <span>Park
										Landscape </span>
								</a>
							</p>
							<div class="btn">

								<a href="ytxj.jsp"> <i></i><em>云台仙境</em>
								</a> <a href="ychg.jsp"> <i></i><em>渊淳怀古</em>
								</a> <a href="ssts.jsp"> <i></i><em>誓水淘沙</em>
								</a> <a href="czht.jsp"> <i></i><em>赤子鸿图</em>

								</a>

							</div>
						</div>
					</div></li>
				<li><a href="#">
						<p>园区碑型</p>
						<p>Stele line</p>
				</a>

					<div class="header-nav2">
						<div class="wrap">
							<p>
								<a href="javascript:void(0);"> <span>园区碑型</span> <span>Stele
										line </span>
								</a>
							</p>
							<div class="btn">

								<a href="ctm.jsp"> <i></i><em>传统墓</em>
								</a> <a href="#"> <i></i><em>商品墓</em>
								</a> <a href="#"> <i></i><em>现代墓</em>
								</a> <a href="#"> <i></i><em>家庭传统墓</em>
								</a> <a href="#"> <i></i><em>艺术墓</em>
								</a> <a href="#"> <i></i><em>生态墓</em>
								</a>

							</div>
						</div>
					</div></li>
				<li><a href="#">
						<p>客户服务</p>
						<p>service</p>
				</a>
					<div class="header-nav2">
						<div class="wrap">
							<p>
								<a href="javascript:void(0);"> <span>客户服务</span> <span>service</span>
								</a>
							</p>
							<div class="btn">
								</a> <a href="qffw.jsp"> <i></i><em>迁坟服务</em>
								</a> <a href="dksj.jsp"> <i></i><em>代客祭扫</em>
								</a> <a href="mbwh.jsp"> <i></i><em>墓碑维护</em>
								</a> <a href="byfw.jsp"> <i></i><em>殡仪服务</em>
								</a> <a href="ythg.jsp"> <i></i><em>国外遗体回国</em>
								</a>

							</div>
						</div>
					</div></li>
				<li><a href="javascript:void(0);">
						<p>殡葬指南</p>
						<p>Funeral Guide</p>
				</a>
					<div class="header-nav2">
						<div class="wrap">
							<p>
								<a href="javascript:void(0);"> <span>殡葬指南</span> <span>Funeral
										Guide </span>
								</a>
							</p>
							<div class="btn">

								<a href="gmzn.jsp"> <i></i><em>购墓指南</em>

								</a>

							</div>
						</div>
					</div></li>
				<li><a href="#">
						<p>殡葬用品</p>
						<p>funeral products</p>
				</a>
					<div class="header-nav2">
						<div class="wrap">
							<p>
								<a href="javascript:void(0);"> <span>殡葬用品</span> <span>CUSTOMIZE</span>
								</a>
							</p>
							<div class="btn"></div>
						</div>
					</div></li>
				<li><a id="denglu9527" href="javascript:void(0);">
						<p yh="yh">注册/登录</p>
						<p tc="tc">Sign up</p>
				</a></li>
		</div>

		</ul>

	</div>
	</header>
	<style type="text/css">
.swiper-slide-active {
	margin: 0 116px;
}

.button {
	top: 0px !important;
}

.button .swiper-button-next {
	margin-left: 500px;
}

.swiper-slide {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.swiper-container {
	margin: 0 !important;
	padding-bottom: 170px;
	padding-top: 50px;
}

.swiper-slide img:first-of-type {
	-webkit-box-reflect: below 5px
		-webkit-linear-gradient(transparent, transparent 60%, rgba(0, 0, 0, .6));
	/*box-reflect: below 0px linear-gradient(transparent, transparent 60%, rgba(0, 0, 0, .6));*/
	-moz-box-reflect: below 5px
		-moz-linear-gradient(transparent, transparent 60%, rgba(0, 0, 0, .6));
}

.swiper-slide img:last-of-type {
	opacity: 1;
}

.vjs-button>.vjs-icon-placeholder:before {
	line-height: 1.9em;
}

.index-ser-content .txt p:first-of-type {
	font-size: 30px;
	line-height: 18px;
	padding: 15px 0 20px 0;
}

.goods_list ul {
	width: 1000px;
	margin: 0 auto;
	margin-top: 130px;
}

.goods_list ul li {
	float: left;
	width: 250px;
	list-style: none;
	margin-top: 30px;
}

.goods_list ul li img {
	margin-left: 20px;
}

.goods_list ul li p {
	text-align: center;
	margin-top: 5px;
	font-size: 16px;
	color: rgb(255, 255, 255);
}

.goods_list ul li p button {
	display: inline-block;
	width: 80px;
	height: 30px;
	background: red;
	color: #fff;
	line-height: 30px;
	font-size: 12px;
	border-radius: 5px;
	cursor: pointer;
}
</style>
	<div class="goods_list">
		<ul id="lb">			
		</ul>
	</div>
	<footer class="clear">

	<div class="f-bottom">
		<p>
			©2021 云顶天宫 www.ydtg.com.cn 版权所有;<a href="" rel="nofollow"
				target="_blank"></a>技术支持：Immortality
		</p>
	</div>
	</footer>
</body>
<div id="addDiv" style="display: none">
		<p style = "margin-top: 25px;font-size:18px; text-align:center;">您确定要购买此商品吗？</p>
		<div style="margin-left:30px;margin-top:20px"><label style = "font-size:18px;margin-top:-10px" class="layui-form-label">数量</label>
				<div class="layui-input-inline">
				 <div style="margin-top:40px;display:inline">
			<a id="jia" href="#none" style="border: 1px solid #000">+</a>
			</div>
			<span
				id="shuliang" style="margin-right: 10px; margin-left: 10px">1</span><a id="jian" href="#none" style="border:1px solid #000">-</a></div>
				</div>
		<div class="layui-form-item">
			<div style = "margin-top: 25px;"class="layui-input-block">
			<span><button style = "margin-right: 0px;"type="button" id="goumai" class="layui-btn layui-btn-danger layui-btn-radius">确定</button>
			 <button style = "margin-left: 0px;"type="button" id="quxiao" class="layui-btn layui-btn-danger layui-btn-radius">取消</button></span>
			</div>
		</div>
</div>
<div id="denglu1" style="display: none">
	<form class="layui-form" lay-filter="mydengluform" id="mydengluform"
		action="">
		
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-inline">
					<input type="tel" name="yonghu" 
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input type="password" name="pwd" 
						autocomplete="off" class="layui-input">
				</div>
			</div>

		</div>
		<div>
			<center>
				<button id="denglu2" type="submit" style="width: 120px;"
				lay-filter="mydengluform" lay-submit=""
					class="layui-btn layui-btn-fluid layui-btn-danger layui-btn-radius">登录</button>
			</center>
		</div>
	</form>
</div>
<script src="123\jquery-1.7.2.min.js" type="text/javascript"
	charset="utf-8"></script>
<script src="123\wow.min.js" type="text/javascript" charset="utf-8"></script>
<script src="123\js.js" type="text/javascript" charset="utf-8"></script>
<script src="123\video.min.js" type="text/javascript" charset="utf-8"></script>
<script src="123\videojs-ie8.min.js" type="text/javascript"
	charset="utf-8"></script>
<script src="123\swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="123\Lunbo.js" type="text/javascript" charset="utf-8"></script>
<script src="123\dialog-plus-min.js"></script>
<script src="123\jquery.form.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/layui/layui.js"></script>
<script type="text/javascript">
	
	layui.use([ 'layer', 'form' ], function() {
		var layer = layui.layer;
		var form = layui.form;
		
		//弹出登录页面
		$(function(){
			$.ajax({
				url : '${pageContext.request.contextPath }/PictureServelt',
				data : {
					'action':'',
				},
				type : 'post',
				dataType:'json',
				success : function(data) {
					if (data.code == 0) {
						for(var i = 0;i<data.shuliang;i++){
							
							$img=$('<img src="'+data.imgList[i].route+'" alt="花" width="200px" height="200px" />');
							$p1 = $('<p class="top_name">'+data.materiels[i].name+'</p>');
							$span=$('<span><asd>￥</asd><sdf>'+data.materiels[i].price+'</sdf></span>');
							$p2=$('<p></p>');
							$btn=$('<button type="button" class="layui-btn 999">购买</button>')
							$p3=$('<p></p>');
							$li = $('<li></li>');
							$p2.append($span);
							$p3.append($btn);
							$li.append($img);
							$li.append($p1);
							$li.append($p2);
							$li.append($p3);
							$("#lb").append($li);
							$p3.children().click(function() {
								$i = $(this);
								dianji($i);
							});
						}
					}
					
				}
			});
			
		});
		
		function dianji($i) {	
			if($("[yh=yh]").html() == "注册/登录"){
				openIndex = layer.open({
					type : 1,
					title : "云顶天宫欢迎您，请先登录",
					area : [ '350px', '27%' ],
					content : $('#denglu1')
				});
			}else{
				openIndex = layer.open({
					type : 1,
					area : [ '380px', '30%' ],
					content : $('#addDiv')
				});
				$("#quxiao").click(function() {
					layer.close(openIndex);
				});
				$("#goumai").click(function(){
					var name = $($i).parent().prev().prev().html();
					var jiage = $($i).parent().prev().children().children().last().html();
					var yh = $("[yh=yh]").html();
					var sl=$("#shuliang").html();
					$.ajax({
						url : '${pageContext.request.contextPath }/PictureServelt?action=gm',
						data : {
							'name':name,
							'jiage':jiage,
							'yh':yh,
							'sl':sl
						},
						type : 'post',
						dataType:'json',
						success : function(data) {
							if (data.code == 0) {
								layer.close(openIndex);
								$("#shuliang").html(1);
							}
							layer.msg(data.msg);
						}
				});
			})
		};
		$("#denglu9527").click(function() {		
			
			if ($("[yh=yh]").html() == "注册/登录") {
				alert("进入判断");
				openIndex = layer.open({
					type : 1,
					title : "云顶天宫欢迎您，请先登录",
					area : [ '350px', '27%' ],
					content : $('#denglu1')
				});
			}else{
				alert("进入方法刷新");
				location.reload();

			}
		});	
	
		
		
		form.on('submit(mydengluform)',function() {
			console.log($("[name=yonghu]").val());
			if ($("[name=yonghu]").val() != ""&&$("[name=pwd]").val() != "") {
				var mydengluformdata = form.val('mydengluform');
				
				$.ajax({
					url : '${pageContext.request.contextPath }/PictureServelt?action=dl',
					data : mydengluformdata,
					type : 'post',
					dataType:'json',
					success : function(data) {
						if (data.code == 0) {
							$("[yh=yh]").html(data.list[0].name);
							$("[tc=tc]").html('点击退出');
							layer.close(openIndex);
						}
						
						layer.msg(data.msg);
					},
					error:function(){
					alert("2");
					}
				});
			
			return false; //阻止表单提交
	

			}else{
				layer.msg('请填写用户名和密码');
			}
		});
	}});
	$("#jia").click(function(){
		 var shuliang=$("#shuliang").html();
		 var i = parseInt(shuliang);
			i=i+1;
		 $("#shuliang").html(i);	
	})
	$("#jian").click(function(){
		 var shuliang=$("#shuliang").html();
		 var i = parseInt(shuliang);
			if(i>1){
				i=i-1;
				 $("#shuliang").html(i);
			}else{
				layer.msg('已经最小了');
			}
	})
	
	
	</script>
</html>